<template>
    <div>
        <headerSearch title="商品列表" :searchBack="true" @done="gotobtn"></headerSearch>
        <!-- 搜索框 -->
        <rearchKey :search_intop="search_intop" :searchISshow="searchISshow" v-on:spot="spot" :clearShow="clearShow" @clearClick="clearClick" @searchCancel="searchCancel"></rearchKey>
        <div class="pagecontent main-product">
          <!-- 企业热销 -->
          <div class="industry_product">
            <div class="title_text_more">
              <h3>企业热销</h3>
            </div>
            <div v-if="hostlist == ''" class="failedLoadEmpty">
                <img src="../common/images/Disappointment.png" alt="">
                <span>暂无查询结果</span>
            </div>
            <div class="host_item" style="background-color: #fff;overflow: hidden;" v-else>
              <ul>
                <li v-for="(host, h) in hostlist.slice(0, 3)" :key="h" @click="productDetailClick(host.IDProduct)"> 
                  <a href="javascript:void(0)">
                    <small>
                      <img src="../common/images/cm_03.jpg" v-if="host.smallImg == null">
                      <img :src="host.smallImg" alt="" v-else>
                    </small>
                    <span>{{host.chrName}}</span>
                    <span>已售<strong>{{host.NumS}}</strong>件</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- 全部商品 -->
          <div class="industry_product rush_to_purchase" style="margin-top: -0.2rem;">
            <div class="purchase_title title_text_more">
              <h3><span>全部商品</span></h3>
            </div>
            <div class="purchase">
              <ul class="purchase_list clear">
                <li v-for="(pur, p) in purlist" :key="p" @click="productDetailClick(pur.IDProduct)">
                  <a href="javascript:void(0)">
                    <span class="purchase_img">
                      <img src="../common/images/cindex_37.jpg" v-if="pur.smallImg == null">
                      <img :src="pur.smallImg" v-else>
                    </span>
                    <span>{{pur.chrName}}</span>
                    <span class="pur_scare">
                      <strong><sub>￥</sub>{{pur.Price}}</strong>
                    </span>
                  </a>
                </li>
              </ul>
              <infinite-loading @infinite="onInfinite" ref="infiniteLoading">
                  <span slot="no-more" class="contentEmpty">
                    <template v-if="purlist.length">
                        (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                    </template>
                    <template v-if="!purlist.length">
                      <img src="../common/images/failedLoad.png" alt="">
                      <em>暂无查询结果</em>
                    </template>
                  </span>
                  <span slot="no-results" class="contentEmpty">
                      <template v-if="purlist.length">
                          (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                      </template>
                      <template v-if="!purlist.length">
                          <img src="../common/images/failedLoad.png" alt="">
                          <em>暂无查询结果</em>
                      </template>
                  </span>
                  <!-- <span slot="no-results" class="contentEmpty">
                      <template v-if="purlist.length">
                          (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                      </template>
                      <template v-if="!purlist.length">
                        <img src="../common/images/failedLoad.png" alt="">
                        <em>暂无查询结果</em>
                      </template>
                  </span> -->
              </infinite-loading>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import rearchKey from '../public/rearchKey';
import InfiniteLoading from 'vue-infinite-loading';
    export default {
        data() {
            return {
              // path:'http://fc.x.e000.com',
              hostlist: [],
              page:0,
              num:10,
              search_intop: '',      //遮罩层样式
              searche: '',            //输入内容
              searchISshow: false,  
              clearShow: false,     //清除内容
              // items: [],
              purlist:[],
              ptype:0,
            }
        },
        components: {
            headerSearch,
            InfiniteLoading,
            rearchKey
        },
        mounted() {
          //获取所有的产品信息
          this.getAllProductList();

        },
        watch: {
            searche(value) {
                if(value != '') {
                  this.clearShow = true;
                  this.search_intop = 'background-color: transparent; z-index: 0;';
                }else {
                  this.clearShow = false;
                  this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);';
                }
            }
        },
        methods: {
          // 获取 监听子组件input值的动向值
          spot(data) {
            this.searche = data;
            console.log('搜索的key',data);
            this.ptype = 1;
            this.onInfinite();
          },
          onInfinite() {
            let that = this;
              console.log("触发")
              setTimeout(() => {       
                  const temp = [];
                  let keyword = this.searche;
                  if(!keyword) keyword = 0;
                  let page = '';
                  if(that.ptype == 1){
                        this.purlist = [];
                        page = 0;
                    }else{
                        if(that.page == 0){
                            page = 1;
                        }else{
                            page = that.page;
                        }
                        
                  }
                  
                  that.$fetch(that.$path+'/index.php/getAllProductList', {page, keyword})
                    .then((res) => {
                    if(res.code == 200){
                      let array = res.data.pro;
                      page++;
                      that.page = page;
                      if(array == '') {
                        that.purlist = [];
                      }else {
                        array.forEach(element => {
                          temp.push(element);
                        });
                        that.purlist = that.purlist.concat(temp);
                        if(that.num > array.length){
                          that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                          return;
                        }
                      }
                      
                       
                      // console.log('产品列表',that.items);
                      // that.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                      that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    }else {
                      console.log('结束')
                      that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                      return;
                    }   
                    that.ptype = 0; 
                });  
                
                  // this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                  // return;
                  // for (let i = this.list.length + 1; i <= this.list.length + 10; i++) {         
                  //     temp.push(i);       
                  // }       
                  // this.list = this.list.concat(temp);       
                  // $state.loaded();       
              }, 1000);
          },
          //获取所有的产品信息
          getAllProductList(){
            let that = this;
            let keyword = this.searche;
            if(!keyword) keyword = 0;
            let page = that.page;
            that.$fetch(that.$path+'/index.php/getAllProductList', {page,keyword})
                .then((res) => {
                  console.log('首页',res);
                if(res.code == 200){
                  that.hostlist = res.data.pro_hot;
                  that.purlist = res.data.pro;
                  // that.actives = res.data.a_list;
                  // that.infos = res.data.n_list;              
                }    
            });
          },
          //点击产品详情
          productDetailClick(val) {
            this.$router.push({path: '/productDetail', query: {id: val}});
          },
          // 点击搜索图标出现搜索框
          gotobtn() {
            this.searchISshow = true;
          },
          // 点击取消隐藏搜索框
          searchCancel(data) {
            this.searchISshow = false;
            data = '';
          },
          // 清除内容
          clearClick(data) {
            // this.clearShow = false;
            data = '';
          },
        },
        computed: {
            //过滤方法
          // purlist: function() {
          //   let that = this;
          //     var _search = that.searche;
          //     if (_search) {
          //         //不区分大小写处理
          //         var reg = new RegExp(_search, 'ig')
          //         //es6 filter过滤匹配，有则返回当前，无则返回所有
          //         return that.items.filter(function(e) {
          //             //匹配所有字段
          //             return Object.keys(e).some(function(key) {
          //                 let data = e.chrName + e.Price;
          //                 return data.match(reg);
          //             })
          //             //匹配某个字段
          //             //  return e.name.match(reg);
          //         })
          //     };
          //     return that.items;
          // }
        },  
    }
</script>

<style>

/***企业热销****/
.industry_product {
    border-top: 0.2rem solid #f4f5f7;
    margin-top: -0.2rem;
    margin-bottom: 0.2rem;
}

.host_item small {
  width: 2.24rem;
  height: 2.24rem;
  vertical-align: middle;
  text-align: center;
  margin-bottom: 0.1rem;
}
.host_item small img {
  width: 2.2rem;
  height: 2.2rem;
  max-width: 100%;
  max-height: 100%;
}


/***全部商品****/
.rush_to_purchase {
    padding-bottom: 0;
    margin-bottom: 0;
} 

.purchase_list .purchase_img {
  width: 3.45rem;
  height: 3.45rem;
  line-height: 3.45rem;
  vertical-align: middle;
  text-align: center;
}
.purchase_list .purchase_img img {
  /* width: 100% !important; */
  height: 3.45rem;
  max-width: 100%;
  max-width: 100%;
}


/* 关键字搜索 */
.search_all_intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
}
.search_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    background-color: #e50838;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
}
.search_all .search_span {
    position: relative;
    width: 100%;
    height: 0.88rem;
}
.search_all .search_span .icon-sousuo {
    font-size: 0.3rem !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0.16rem 0.2rem 0 -0.6rem;
    box-sizing: border-box;
    height: 0.88rem;
    margin-bottom: -0.3rem;
}
.search_all .search_span input {
    display: inline-block;
    width: 6.5rem;
    margin: 0 auto;
    margin-left: -0.7rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background-color: #fff;
    margin-top: -0.1rem;
    border-radius: 4px;
    padding-left: 0.5rem;
    font-size: 0.28rem;
}
.search_all .search_span .icon-guanbi {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.14rem 0.12rem 0 0.12rem;
}
.search_all .search_cancel {
    margin-top: -0.65rem;
    margin-right: 0.12rem;
    font-size: 0.28rem;
    color: #fff;
}


</style>